<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item 
        v-for="(item,index) in list" 
        :key="index"
        :title="`*${item.name}`" 
        :name="index"
      >
      <!-- 二级 -->
        <ul > 
            <li v-for="(item2,i) in  item.children"
             :key="i"
             :class="item2.id==current2?'active':''"
             @click="cellshow(item2,index,2)"
             >{{item2.name}}</li>
        </ul>
        <!--  三级-->
          <ul >
            <li v-for="(item3,index3) in list3[index]"
              :key="index3"
                :class="item3.id==current3?'active':''"
                @click="cellshow(item3,index,3)"
              >{{item3.name}}</li>
          </ul>
        <!--  四级-->
          <ul >
            <li v-for="(item4,index4) in list4[index]"
              :key="index4"
                :class="item4.id==current4?'active':''"
                @click="cellshow(item4,index,4)"
              >{{item4.name}}</li>
          </ul>
       
      </el-collapse-item>
    </el-collapse>
    <h2>已选标签</h2>
    <ul>
     <li v-for="(item,index) in  record"  :key="index">
      {{item}}
     </li>
    </ul>
  </div>
</template>
<script>



import{
  father_label_list,//
  label_show_two_level,//二级
  label_three_show,//三级
  label_list //四级
   }from "@/api/customer";
import addItem from '../components/addList.vue'
export default {
    components: {addItem},
    data() {
      return {
        activeNames: [0,1], //list展开
        list:[] ,//树形1——2级
        list3:{}, //树形3级
        list4:{}, //树形4级
        zid:[],//存储当前id
        record:[],
        current2:null,//二级选中状态
        current3:null,//三级选中状态
        current4:null,//四级选中状态
      };
    },
    mounted(){
        label_show_two_level({name:''}).then(res=>{
            this.list=res.data.data
        })    
    },
    methods: {
      // 点击事件
        cellshow(item,index,num){
          this.zid.push(item.id)
          this.threeShow(item,index,num)
        },
        threeShow(item,index,num){
        
          if(num==2){
              // 二级触发
              this.list4={}  //清空
              this.list3={}  //清空
              this.current3=null 
              this.current2=item.id  
              label_three_show({id:item.id}).then(res=>{
                  this.list3[index]=res.data
                  
                    for(var i=0;i<=this.record.length; i++){
                     
                        if(i>0){

                        }else{
                          this.record[index].push({name2:item.name})
                        }
                      
                     
                    }

                  
                
                  this.$forceUpdate()
              }) 
              }else if(num==3){
                  // 三级触发
                  this.current4=null
                  this.current3=item.id
                  label_list({id:item.id}).then(res=>{
                    this.list4[index]=res.result.items
                    this.record[index].name3=item.name
                    this.$forceUpdate()
                  }) 
              }else{
            // 四级触发
                this.current4=item.id
                this.record[index].name4=item.name
                this.record[index].id=item.id
             
          }
        },

   unique(arr){
    const res= new Map()
         return arr.filter((a)=> !res.has(a.name2) && res.set(a.name2,1))
  }


    },
}

</script>
<style lang="scss" scoped>

div{
  width: 100%;
}
ul{
    padding: 0;
    list-style: none;

    width: 100%;
    display: block;
}
li{
    border: 1px solid #ccc;
    margin-right: 10px;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
      display: inline-block;
      text-align: center;
}
.active{
  background: red;
  color: #fff;
}
</style>
